<template>
  <div class="h-full">
    <n-card class="shadow-sm rounded-16px">
      <n-form class="w-full" size="small" inline>
        <n-form-item label="日期:" label-placement="left">
          <n-date-picker v-model:value="machineAlarmRange" style="width: 300px" type="daterange" clearable />
        </n-form-item>
        <n-form-item label="" label-placement="left">
          <n-button type="primary" :on-click="getPmResult">
            <template #icon><icon-mdi-map-search-outline /></template>
            查询
          </n-button>
        </n-form-item>
      </n-form>
      <vxe-grid v-bind="machineAlarmOptions"></vxe-grid>
    </n-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import dayjs from 'dayjs';
import type { VxeGridProps } from 'vxe-table';
import { fetchPmResultList } from '@/service';

const machineAlarmRange = ref<[number, number]>([dayjs().add(-1, 'day').valueOf(), Date.now()]);
const machineAlarmOptions = reactive<VxeGridProps>({
  border: true,
  size: 'mini',
  showFooter: true,
  align: null,
  rowConfig: { isHover: true },
  columnConfig: {
    resizable: true
  },
  columns: [
    {
      field: 'AREANAME',
      title: '车间',
      width: '120px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'PROCESSOPERATIONNAME',
      title: '工序',
      width: '80px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'MACHINENAME',
      title: '设备名称',
      width: '100px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'DESCRIPTION',
      title: '描述',
      width: '100px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'POSITION',
      title: '设备保养项目',
      width: '200px',
      showOverflow: true
    },
    {
      field: 'PMCIRCLETYPE',
      title: '保养周期',
      width: '100px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'UACTOR',
      width: '80px',
      title: '保养员',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'PMSTARTTIME',
      width: '130px',
      title: '保养开始时间'
    },
    {
      field: 'PMENDTIME',
      width: '130px',
      title: '保养结束时间'
    },
    {
      field: 'PMTIME',
      width: '120px',
      title: '标准时长(min)'
    },
    {
      field: 'PMDURATION',
      width: '120px',
      title: '保养时长(min)',
      showOverflow: true
    },
    {
      field: 'PMCONTENT',
      width: '200px',
      title: 'PM内容',
      showOverflow: true
    },
    {
      field: 'PMCHECKTIME',
      width: '130px',
      title: '确认时间'
    },
    {
      field: 'UCHECKER',
      width: '120px',
      title: '确认人',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'RESULT',
      width: '100px',
      title: '确认状态'
    }
  ],
  toolbarConfig: {
    buttons: [],
    export: true,
    print: true,
    // zoom: true,
    custom: true
  },
  data: [],
  mergeCells: [],
  exportConfig: {
    remote: false,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all']
  }
});

const getPmResult = async () => {
  const result = await fetchPmResultList(
    dayjs(machineAlarmRange.value[0]).format('YYYYMMDDHHmmss'),
    dayjs(machineAlarmRange.value[1]).format('YYYYMMDDHHmmss')
  );
  if (result.data) {
    machineAlarmOptions.data = result.data;
  }
};
</script>
